<template>
  <div class="shop-list">
    <van-sticky>
      <van-nav-bar title="加盟商列表" left-arrow @click-left="onClickLeft" style="width:100%;" v-if="status==4" />
      <van-nav-bar title="店铺列表" left-arrow @click-left="onClickLeft" style="width:100%;" v-if="status==1" />
    </van-sticky>
    <div class="shop-list-filters" v-if="utype==0&&status==1">
      <van-cell title="" :value="filter_val" value-class="filters" :border="false" @click="showManager = true">
        <template #right-icon>
          <van-icon :name="require('@/assets/filter.png')" class="filter-o" />
        </template>
      </van-cell>
    </div>
    <van-collapse v-model="activeName" accordion :border="false" v-if="status==4">
      <van-collapse-item v-for="(item, index) in shoplist" :key="index" :title="item.spf_name" :name="item.id" :value="item.is_lease==1?'已租赁':'未租赁'" :icon="require('@/assets/partner.png')">
        <span class="shop-list-detail">地址：{{item.province + item.city + item.area}}</span><br>
        <span class="shop-list-detail">详细地址：{{item.address}}</span><br>
        <span class="shop-list-detail">联系电话：{{item.spf_phone}}</span><br>
        <span class="shop-list-detail">联系邮箱：{{item.spf_email}}</span><br>
        <span class="shop-list-detail">设备租金：{{item.rent}}</span><br>
        <span class="shop-list-detail">设备押金：{{item.cash_pledge}}</span><br>
        <span class="shop-list-detail">租赁时限：{{item.timelimit==1?'月租':item.timelimit==2?'季租':item.timelimit==3?'年租':'未租赁'}}</span><br>
        <span class="shop-list-detail">租赁设备数量：{{item.num}} 台</span><br>
      </van-collapse-item>
      <van-empty description="暂无店铺" v-if="shoplist.length == 0" />
    </van-collapse>
    <van-collapse v-model="activeName" accordion :border="false" v-if="status==1">
      <van-collapse-item v-for="(item, index) in shoplist" :key="index" :title="item.shopname" :name="item.id" :value="item.state==1?'营业中':'打烊'" :icon="require('@/assets/partner.png')">
        <span class="shop-list-detail">店铺名：{{item.user_name}}</span><br>
        <span class="shop-list-detail">店长姓名：{{item.shop_manager}}</span><br>
        <span class="shop-list-detail">所在地：{{item.province + item.city + item.district}}</span><br>
        <span class="shop-list-detail">详细地址：{{item.address}}</span><br>
        <span class="shop-list-detail">联系电话：{{item.shopphone}}</span><br>
        <span class="shop-list-detail">归属加盟商：{{item.spf_name}}</span><br>
      </van-collapse-item>
      <van-empty description="暂无店铺" v-if="shoplist.length == 0" />
      <van-pagination v-if="pages>1" v-model="currentPage" :total-items="shoplist.count" :page-count="pages" @change="onPageChange" force-ellipses>
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </van-collapse>
    <!-- 筛选 -->
    <van-popup v-model="showManager" position="bottom" round>
      <van-picker title="请选择" show-toolbar :columns="filter_list" :loading="loading" @confirm="onConfirm" @cancel="showManager = false" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  name: "ShopList",
  data () {
    return {
      showManager: false,
      searchVal: '',
      activeName: '',
      shoplist: [],
      id: 0,
      filter_id: '',
      filter_val: '所有店铺',
      filter_list: [],
      utype: '',
      status: 0,
      currentPage: 1,
      spf_id: '',
      loading: true,
      pages: 0,
    };
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onPageChange (v) {
      this.currentPage = v
      this.$axios("/shops/getshopslist", {
        page: this.currentPage,
        subplatid: this.filter_id //加盟商id
      })
        .then(res => {
          if (res.data.code == 0) {
            this.shoplist = res.data.data.rs
          } else {
            Toast('暂无店铺')
          }
        })
    },
    onConfirm (val) {
      this.showManager = false
      this.filter_id = val.id
      this.filter_val = val.text
      this.$axios("/shops/getshopslist", {
        page: 1,
        subplatid: val.id //加盟商id
      })
        .then(res => {
          if (res.data.code == 0) {
            this.shoplist = res.data.data.rs
            this.pages = Math.ceil(res.data.data.count * 1 / 10)
          }
        })
    },
    // 获取需要筛选的加盟商列表
    getFilterList () {
      this.$notoken("/subplat/getsubplatlist", {
        type: 1,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.filter_list = res.data.data.map((item) => {
              return {
                ...item,
                id: item.spf_id,
                text: item.spf_name,
              };
            });
            var items0 = {
              id: "",
              text: "所有店铺",
            };
            var items1 = {
              id: "0",
              text: "总部",
            };
            this.filter_list.unshift(items1);
            this.filter_list.unshift(items0);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取列表
    getFranchiseeList () {
      if (this.status == 4) {
        // 请求加盟商列表
        this.$notoken("/subplat/getsubplatlist", {
          type: 2,
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.shoplist = res.data.data
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 请求店铺列表
        this.$axios("/shops/getshopslist", {
          page: this.currentPage,//分页页码
        })
          .then(res => {
            if (this.spf_id == 0) {
              // 渲染所有店铺
              this.shoplist = res.data.data.rs
              this.pages = Math.ceil(res.data.data.count * 1 / 10)
            } else {
              // 渲染当前加盟商账号下的店铺
              this.shoplist = res.data.data.rs.filter(v => {
                return v.spf_id == this.spf_id
              })
            }
          })
      }
    },
  },
  created () {
    this.spf_id = JSON.parse(localStorage.getItem("userInfo")).user.spf_id
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.status = this.$route.params.id
    this.getFranchiseeList()
  },
  mounted () {
    if (this.status == 1) {
      setTimeout(() => {
        // 加载筛选列表
        this.loading = false;
        this.getFilterList()
      }, 1500);
    }
  },
};
</script>

<style lang="less" scoped>
.shop-list {
  height: 100%;
  background-color: #f6f6f6;
  /deep/ .van-cell__left-icon {
    margin-right: 15px;
  }
  /deep/ .van-pagination {
    margin: 1rem 0;
  }
  /deep/ .van-pagination__item,
  /deep/ .van-pagination__next,
  /deep/ .van-hairline {
    color: #1bb89c;
    background-color: transparent;
  }
  /deep/ .van-pagination__item--disabled,
  /deep/ .van-pagination__item--disabled:active {
    opacity: 0.1;
  }
  /deep/ .van-pagination__item--active {
    background-color: #1bb89c;
    color: #fff !important;
  }
  /deep/ .van-pagination__item::after {
    border-width: 0;
  }
  &-filters {
    /deep/ .van-cell {
      background-color: #f6f6f6;
    }
    .filters {
      font-size: 28px;
      font-weight: bold;
      color: #707070;
    }
    .filter-o {
      margin-left: 12px;
      align-self: center;
    }
  }
  &-detail {
    font-size: 25px;
    padding: 0 30px;
  }
}
</style>